<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <region :options="regionSearchOptions"></region>

      <el-date-picker
        v-model="listQuery.startTime"
        type="date"
        class="filter-item"
        :editable="false"
        :clearable="false"
        :placeholder="$t('Start_time')"
      ></el-date-picker>

      <el-date-picker
        v-model="listQuery.endTime"
        type="date"
        class="filter-item"
        :editable="false"
        :clearable="false"
        :placeholder="$t('End_time')"
      ></el-date-picker>

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >{{ $t("Search") }}</el-button
      >
    </div>

    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266" />
      <span class="font-small">{{ $t("Summary") }}</span>
    </div>

    <div class="table-layout">
      <el-row>
        <el-col :span="5" class="table-cell-title">{{ $t("退款数量") }}</el-col>
        <el-col :span="5" class="table-cell-title">{{ $t("退款总额") }}</el-col>
        <el-col :span="5" class="table-cell-title">{{ $t("商品总额") }}</el-col>
        <el-col :span="4" class="table-cell-title">{{ $t("税费") }}</el-col>
        <el-col :span="5" class="table-cell-title">{{ $t("税费详情") }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5" class="table-cell">{{ refundStat.orderNum }}</el-col>
        <el-col :span="5" class="table-cell">{{
          refundStat.totalAmount | floorTwoDecimal
        }}</el-col>
        <el-col :span="5" class="table-cell">{{
          refundStat.goodsAmount | floorTwoDecimal
        }}</el-col>
        <el-col :span="4" class="table-cell">{{
          refundStat.taxAmount | floorTwoDecimal
        }}</el-col>
        <el-col :span="5" class="table-cell">
          <div v-for="tax in refundStat.taxDetailLs" :key="tax.code">
            {{ tax.code }}：{{ tax.totalAmount | floorTwoDecimal }}
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266" />
      <span class="font-small">{{ $t("Details") }}</span>
    </div>
    <p></p>
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('Searching')"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        type="index"
        :index="getIndex"
        width="50"
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('订单所属门店')"
        prop="shopName"
      />
      <el-table-column align="center" :label="$t('退款数量')" prop="orderNum" />
      <el-table-column align="center" :label="$t('Products')" prop="goodsNum" />
      <el-table-column
        align="center"
        :label="$t('退款总额')"
        prop="totalAmount"
      >
        <template slot-scope="scope">
          {{ scope.row.totalAmount | floorTwoDecimal }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('商品金额')"
        prop="goodsAmount"
      >
        <template slot-scope="scope">
          {{ scope.row.goodsAmount | floorTwoDecimal }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('税费')" prop="taxAmount">
        <template slot-scope="scope">
          {{ scope.row.taxAmount | floorTwoDecimal }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('税费详情')">
        <template slot-scope="scope">
          <div v-for="tax in scope.row.taxDetailLs" :key="tax.code">
            {{ tax.code }}：{{ tax.totalAmount | floorTwoDecimal }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('Operate')"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="['GET /admin/p/order_orderagentrefund_index']"
            type="primary"
            size="mini"
            @click="handleDetail(scope.row)"
            >{{ $t("Details") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  orderAgentRefundTotalStatistics,
  orderAgentRefundStatistics,
} from "@/api/order";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import checkPermission from "@/utils/permission"; // 权限判断函数
import Region from "@/components/Region";
import { allForPerm } from "@/api/shop";

export default {
  name: "orderAgentRefundStatistics",
  components: { Region, Pagination },
  filters: {},
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        sort: "add_time",
        order: "desc",
        regionId: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      regionSearchOptions: {},
      refundStat: {},
    };
  },
  created() {
    this.listQuery.startTime = this.getFirstDayOfMonth(this.getVancouverDate()); //当月第一天
    this.listQuery.endTime = this.getVancouverDate(); //当天

    this.getList();
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;

      // 概况
      orderAgentRefundTotalStatistics(this.listQuery)
        .then((response) => {
          this.refundStat = response.data.data;
        })
        .catch((response) => {
          this.$notify.error({
            title: this.$t("Failed"),
            message: this.$t(response.data.errmsg),
          });
        });

      // 详情
      orderAgentRefundStatistics(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleDetail(row) {
      let params = {
        shopId: row.shopId,
        startTime: this.getFullDate(this.listQuery.startTime),
        endTime: this.getFullDate(this.listQuery.endTime),
      };
      this.$router.push({ path: "/order/agent_refund", query: params });
    },
    getFullDate(targetDate) {
      var D, y, m, d;
      if (targetDate) {
        D = new Date(targetDate);
        y = D.getFullYear();
        m = D.getMonth() + 1;
        d = D.getDate();
      } else {
        y = fullYear;
        m = month;
        d = date;
      }
      m = m > 9 ? m : "0" + m;
      d = d > 9 ? d : "0" + d;
      return y + "-" + m + "-" + d;
    },
    getIndex(index) {
      return index + 1 + (this.listQuery.page - 1) * this.listQuery.limit;
    },
    //获取加拿大温哥华的当前时间
    getVancouverDate() {
      const options = { timeZone: "America/Vancouver" };
      const vancouverDate = new Date().toLocaleDateString("en-CA", options);
      return vancouverDate;
    },
    //获取加拿大温哥华当月第一天的时间
    getFirstDayOfMonth(dateString) {
      // 创建一个新的 Date 对象
      const date = new Date(dateString);
      // 将日期设置为月份的第一天
      date.setDate(1);
      // 获取年月日并返回
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
  watch: {
    "regionSearchOptions.regionIds": function (newVal, oldVal) {
      if (newVal && newVal.length > 0) {
        this.listQuery.regionId =
          this.regionSearchOptions.regionIds[
            this.regionSearchOptions.regionIds.length - 1
          ];
      } else {
        this.listQuery.regionId = undefined;
      }
    },
  },
};
</script>

<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
